import React, { useState, useEffect } from 'react'
import { Button, Table, Tag, Modal, Popover, Switch } from 'antd'
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import axios from 'axios';
const { confirm } = Modal;


export default function RightList() {

  const [dataSource, setDataSource] = useState([])

  const confirmMessage = (item) => {
    confirm({
      title: 'Do you Want to delete these items?',
      icon: <ExclamationCircleOutlined />,
      content: 'Some descriptions',
      onOk() {
        // console.log('OK');
        deleteMethod(item)
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  // 删除函数
  const deleteMethod = (item) => {
    // console.log(item);
    // 后端 + 页面全部要删除

    if (item.grade === 1) {
      // 一级数据
      setDataSource(dataSource.filter(data => data.id !== item.id))
      axios.delete(`http://localhost:5000/rights/${item.id}`).then(res => {
        console.log('删除成功');
        console.log(res);
      })
    } else {
      // 二级数据
      console.log(item.rightId);

      let list = dataSource.filter(data => data.id === item.rightId)
      list[0].children = list[0].children.filter(data => data.id !== item.id)
      setDataSource([...dataSource])
      axios.delete(`http://localhost:5000/children/${item.id}`)
    }
  }

  const switchMethod = (item) => {
    // console.log(item);
    item.pagepermisson = item.pagepermisson === 1 ? 0 : 1
    setDataSource([...dataSource])
    if (item.grade === 1) {
      axios.patch(`http://localhost:5000/rights/${item.id}`, {
        pagepermisson: item.pagepermisson
      })
    } else {
      axios.patch(`http://localhost:5000/children/${item.id}`, {
        pagepermisson: item.pagepermisson
      })
    }

  }

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '权限名称',
      dataIndex: 'title',
    },
    {
      title: '权限路径',
      dataIndex: 'key',
      render: (key) => {
        return <Tag color="orange">{key}</Tag>
      }
    },
    {
      title: '操作',
      render: (item) => {
        return <div>
          <Button danger shape="circle" icon={<DeleteOutlined />} onClick={() => confirmMessage(item)}></Button>
          <Popover
            content={<div
              style={{ textAlign: "center" }}><Switch checked={item.pagepermisson} onChange={() => switchMethod(item)}></Switch></div>}
            title="页面配置项"
            trigger={item.pagepermisson === undefined ? '' : "click"}>
            <Button
              type='primary'
              shape="circle"
              disabled={item.pagepermisson === undefined}
              icon={<EditOutlined />}></Button>
          </Popover>
        </div>
      }
    }
  ];

  useEffect(() => {
    axios.get("http://localhost:5000/rights?_embed=children").then(res => {
      const list = res.data
      list.forEach(item => {
        if (item.children.length === 0) {
          item.children = ''
        }
      })
      setDataSource(list)
    })
  }, [])

  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{
          pageSize: 5
        }}
      />
    </div>
  )
}
